<template>
  <div class="left-btn" @click="emit('close')">
    <image class="left-btn-icon" mode="widthFix" src="https://cos.aitshirt.cn/app-icon/sheji1%20%2811%29.png" />
  </div>

  <div v-for="item in bottomTools" :key="item.key" class="item-center bottom-btn" @click="bindBottomTool(item)">
    <img class="img-item" mode="widthFix" :src="item.icon" />
    <div class="txt-item">{{ item.name }}</div>
  </div>
</template>

<script setup lang="ts">
const bottomTools = [
  {
    name: '替换照片',
    icon: 'https://cos.aitshirt.cn/app-icon/sheji1%20%2827%29.png',
    key: 'replace',
  },
  {
    name: '复位',
    icon: 'https://cos.aitshirt.cn/app-icon/sheji1%20%2818%29.png',
    key: 'reset',
  },
  {
    name: '层级',
    icon: 'https://cos.aitshirt.cn/app-icon/sheji1%20%283%29.png',
    key: 'zIndex',
  },
  {
    name: '微调',
    icon: 'https://cos.aitshirt.cn/app-icon/sheji1%20%2828%29.png',
    key: 'location',
  },
  {
    name: '翻转',
    icon: 'https://cos.aitshirt.cn/app-icon/sheji1%20%2817%29.png',
    key: 'flip',
  },
  {
    name: '复制',
    icon: 'https://cos.aitshirt.cn/app-icon/sheji1%20%2819%29.png',
    key: 'copy',
  },
];

const emit = defineEmits(['bindTool', 'close']);

const bindBottomTool = (item) => {
  emit('bindTool', item);
};
</script>

<style scoped lang="scss">
.left-btn {
  position: absolute;
  left: 16rpx;
  .left-btn-icon {
    width: 48rpx;
    height: 60rpx;
  }
}

.item-center {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8rpx;
  font-size: 22rpx;
  color: #222222;
}

.img-item {
  width: 32rpx;
}

.txt-item {
  margin: 0 8rpx;
  height: 28rpx;
  line-height: 28rpx;
  font-size: 22rpx;
  color: #222222;
}
</style>
